<template>
<div class="uploading">
  <el-page-header @back="goBack" content="上传作品" class="box_title">
  </el-page-header>
  <div class="upload_box">
    <el-upload
        class="upload-demo"
        drag
        :headers="headers"
        :limit="1"
        :data="{dir: 'works'}"
        action="/api/v1/upload"
        accept=".zip,.rar,.gz,.apk"
        :before-remove="handleBeForeRemove"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        <p>请将你的作品、演示视屏、ppt、项目计划书等文件打包在一个文件夹中压缩后上传，命名格式为队伍+作品名称。</p>
      </div>
    </el-upload>
  </div>
</div>
</template>

<script>

export default {
  data() {
    return{
      headers: {
        token: window.sessionStorage.getItem('token')
      },
      loading: false,
      workUrl: '',
      team: {
        gameID: '蓝桥杯',
        title: 'GX-game',
        tname: '瓦夫队'
      }
    }
  },
  methods: {
    goBack() {
      window.sessionStorage.removeItem('groupID');
      window.sessionStorage.removeItem('workName');
      this.$router.push('/backIndex/entry')
    },

  //  根据group跟新作品信息，把作品url传给后端
    renewWork(){

    },

  //  上传成功
    async handleSuccess(res,file,fileList){
      file === fileList;
      if(res.success){
        const data = {};
        data.attachment = res.data.url;
        data.groupID = window.sessionStorage.getItem('groupID');
        data.content = ' ';
        const response = await this.$api.renewWork(data)
        console.log('请求值', data);
        console.log('返回值',response);
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.handleRemove()
        this.$message({
          message: '上传失败',
          type: 'error'
        });
      }
    },

  //  上传失败
    handleError(event, file, fileList){
      console.log(event, file, fileList);
      this.$message({
        message: '上传失败',
        type: 'error'
      });
    },

  //  文件删除之前
    handleBeForeRemove(file,fileList){
      console.log(file, fileList);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        return false;
      });
    },

  //  删除文件
    handleRemove(file,fileList){
      console.log(file, fileList);
      this.$message({
        message: '删除成功',
        type: 'success'
      });
    },

  //  当文件上传超出规定个数时
    handleExceed(){
      this.$message({
        message: "最大只允许上传一个文件，请先删除已上传的文件！",
        type: 'warning'
      })
    }
  },
  // mounted() {
  //   this.headers.token = window.sessionStorage.getItem('token');
  // },
  // watch: {
  //   token() {
  //     this.headers.token = window.sessionStorage.getItem('token');
  //   }
  // }
}
</script>

<style lang="less" scoped>
.uploading{
  .box_title{
    margin-bottom: 20px;
  }
  .upload_box{
    background-color: #ffffff;
    box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
    padding: 40px 0;
    .upload-demo{
      width: 366px;
      margin: 100px auto;
      .el-upload__tip{
        font-size: 15px;
      }
    }
  }
}
</style>
